<template lang="html">
    <Panel title="精选推荐" :class="$style.panel">
        <section :class="$style.content">
            <dl :class="$style.item" v-for="item in items" :key="item.title">
                <dt>{{item.title}}<span :class="$style.red">{{item.sub}}</span></dt>
                <dd>{{item.rate}}</dd>
                <dd>{{item.text}}</dd>
            </dl>
        </section>
    </Panel>
</template>
<script>
    import Panel from "../core/panel.vue"
    export default {
        components: {
            Panel
        },
        data() {
            return {
                items: [
                    { title: "定期理财", sub: "90天可质押", rate: "5.60%", text: "历史年化圈报率" },
                    { title: "国收理财", sub: "理财首选", rate: "5.80%", text: "综合年化收利率" },
                    { title: "基智账户", sub: "组合投资", rate: "8%~10%", text: "止盈年化收利率" },
                    { title: "小白基金", sub: "天天赚钱", rate: "4.27%", text: "7日年化收利率" }
                ]
            }
        },
    }
</script>
<style lang="scss" module>
    @import "../../css/element.scss";

    .panel {
        @include panel;
    }

    .content {
        @include flex(row);
        justify-content: space-around;
        box-sizing: border-box;
    }

    .content>.item {
        position: relative;
        width: 50%;
        padding: 34px 26px;
        box-sizing: border-box;
    }

    .content>.item:nth-child(n + 3) {
        border-top: 1px solid #ddd;
    }

    /* .content:after {
        content: "";
        display: block;
        width: 100%;
        height: 0;
        box-sizing: border-box;
        border-bottom: 1px solid #ddd;
        position: relative;
        top: -208px;
    } */

    .content>.item:after {
        content: "";
        width: 1px;
        height: 136px;
        display: block;
        position: absolute;
        top: 5%;
        right: 0;
        margin-top: 30px;
        border-right: 1px solid #ddd;
    }

    .content>.item:nth-child(2n):after {
        display: none;
    }

    .item dt {
        font-size: 30px;
        line-height: 42px;
        color: #333;
    }

    dt span.red {
        font-size: 22px;
        color: #ff5155;
        border: 1px solid #ff5155;
        padding: 0 8px;
        /* vertical-align: 1px; */
        margin-left: 8px;
    }

    .item dd:nth-child(2) {
        color: #ff5155;
        font-size: 44px;
        font-weight: 700;
        height: 58px;
        line-height: 58px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .item dd:nth-child(3) {
        font-size: 24px;
        height: 34px;
        line-height: 34px;
        color: #999;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
</style>